<template>
  <div class="login-container">
    <el-form
      ref="form"
      :rules="rules"
      :model="form"
      label-width="80px"
      class="login-form"
    >
      <h2 class="login-title">Ardai会员管理系统</h2>
      <el-form-item label="账号" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">登陆</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
 
<script>
import { login, info } from "@/api/login";
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "账号不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    onSubmit(formName) {
      console.log("submit!");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$store.dispatch("Login",this.form).then(res=>{
              if(res.flag){
                this.$router.push("/");
              }else{
                this.$message({
                  message:res.msg,
                  type:"error",
                })
              }
          })
          //校验通过就提交表单
          // login(this.form.username, this.form.password).then((res) => {
          //   const loginResult = res.data;
          //   console.log(res.data);
          //   //验证成功进行用户信息的查找
          //   if (loginResult.flag) {
          //     info(loginResult.data.token).then((res) => {
          //       const resUser = res.data;
          //       console.log("userInfo", resUser.data);
          //       //获取用户信息以后进行信息保存
          //       window.localStorage.setItem(
          //         "ardai-msm-token",
          //         loginResult.data.token
          //       );
          //       window.localStorage.setItem(
          //         "ardai-msm-user",
          //         JSON.stringify(resUser.data)
          //       );
          //       //保存以后进行路由的跳转到首页
          //       this.$router.push("/");
          //     });
          //   } else {
          //     //未通过，弹出警告
          //     //alert(loginResult.msg);
          //     this.$message({
          //       message: "警告哦，这是一条警告消息",
          //       type: "warning",
          //     });
          //   }
          // });
        } else {
          console.log("验证失败");
          return false;
        }
      });
    },
  },
};
</script >

<style scoped>
.login-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/bg.jpg");
}
.login-form {
  width: 350px;
  margin: 160px auto;
  background-color: rgba(250, 250, 250, 0.7);
  padding: 30px;
  border-radius: 30px;
}
.login-title {
  text-align: center;
}
</style>